<template>
<!--  文档:https://doc.firstui.cn/docs/layout/card.html-->
  <view :class="{'fui-card__full':props.full,'fui-card__border':props.showBorder,'fui-card__border-radius':props.showBorder && !state.isNvue && !props.full}"
        :elevation="props.showBorder?'0px':props.elevation"

        :style="{marginTop:props.margin[0] || 0,marginRight:props.margin[1] || 0,marginBottom:props.margin[2] || props.margin[0] || 0

        ,marginLeft:props.margin[3] || props.margin[1] || 0,background:props.background,borderRadius:props.radius,

        'box-shadow':props.shadow,borderColor:state.isNvue?borderColor:'transparent'}"
        class="fui-card__wrap" @tap="handleClick">
    <view v-if="props.tag || props.title || props.src" :class="{'fui-card__header-line':props.headerLine}"
          :style="{'border-top-left-radius':props.full?0:props.radius,'border-top-right-radius':props.full?0:props.radius,
          'border-bottom-color':state.isNvue?lineColor:'transparent',paddingTop:props.padding[0] || 0,paddingRight:props.padding[1]||0,
          paddingBottom:props.padding[2] || props.padding[0] || 0,paddingLeft:props.padding[3] || props.padding[1] || 0}"
          class="fui-card__header">
      <view class="fui-card__header-left">
        <image v-if="props.src" :src="props.src"
               :style="{height:props.height+'rpx',width:props.width+'rpx',borderRadius:props.imageRadius}" class="fui-card__header-thumb"
               mode="widthFix"></image>
        <text v-if="props.title" :style="{fontSize:props.size+'rpx',color:props.color}"
              class="fui-card__header-title">{{props.title}}</text>
      </view>
      <view v-if="props.tag" class="fui-card__header-right">
        <text :style="{fontSize:props.tagSize+'rpx',color:props.tagColor}">{{props.tag}}</text>
      </view>
    </view>
    <view class="fui-card__body">
      <slot></slot>
    </view>
    <view :style="{'border-bottom-left-radius':props.full?0:radius,'border-bottom-right-radius':props.full?0:props.radius}"
          class="fui-card__footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup>
import {defineProps,defineEmits,reactive} from "vue";

const emits = defineEmits(['click'])
const props = defineProps({
  //card margin值：[上、右、下、左]
  margin: {
    type: Array,
    default () {
      return ['0', '32rpx']
    }
  },
  //是否通栏，为true时margin-left，margin-right失效
  full: {
    type: Boolean,
    default: false
  },
  //card 背景色
  background: {
    type: String,
    default: '#fff'
  },
  //card 圆角，非nvue下showBorder为false时生效
  radius: {
    type: String,
    default: '16rpx'
  },
  //阴影：nvue下，android无效
  shadow: {
    type: String,
    default: '0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05)'
  },
  //仅android且nvue下有效，box-shadow失效
  elevation: {
    type: String,
    default: '5px'
  },
  //是否显示card 边框，为true时box-shadow失效
  showBorder: {
    type: Boolean,
    default: false
  },
  //边框颜色，仅nvue下生效
  borderColor: {
    type: String,
    default: '#EEEEEE'
  },
  headerBackground: {
    type: String,
    default: '#fff'
  },
  //是否需要header底部线条
  headerLine: {
    type: Boolean,
    default: true
  },
  //header 底部线条颜色，仅nvue有效，非nvue改变颜色使用css变量
  lineColor: {
    type: String,
    default: ''
  },
  //header padding值：[上、右、下、左]
  padding: {
    type: Array,
    default () {
      return ['20rpx', '20rpx']
    }
  },
  //头像，图标图片地址
  src: {
    type: String,
    default: ''
  },
  //图片宽度，单位rpx
  width: {
    type: [Number, String],
    default: 64
  },
  //图片高度，单位rpx
  height: {
    type: [Number, String],
    default: 64
  },
  //图片圆角
  imageRadius: {
    type: String,
    default: '8rpx'
  },
  title: {
    type: String,
    default: ''
  },
  size: {
    type: [Number, String],
    default: 30
  },
  color: {
    type: String,
    default: '#7F7F7F'
  },
  tag: {
    type: String,
    default: ''
  },
  tagSize: {
    type: [Number, String],
    default: 24
  },
  tagColor: {
    type: String,
    default: '#b2b2b2'
  },
  index: {
    type: Number,
    default: 0
  }
},)
const state = reactive({
  isNvue:false

})
const handleClick = ()=> {
  emits('click',{
    index: props.index
  })
}
</script>

<style scoped>
.fui-card__wrap {
  overflow: hidden;
  /* #ifndef APP-NVUE */
  flex: 1;
  box-sizing: border-box;
  /* #endif */
}

.fui-card__full {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}

/* #ifndef APP-NVUE */
.fui-card__full::after {
  border-radius: 0 !important;
}

/* #endif */

.fui-card__border {
  position: relative;
  box-shadow: none !important;
  /* #ifdef APP-NVUE */
  border-width: 0.5px;
  border-style: solid;
  /* #endif */
}

/* #ifndef APP-NVUE */
.fui-card__border-radius {
  border-radius: 16rpx !important;
}

.fui-card__border::after {
  content: ' ';
  position: absolute;
  height: 200%;
  width: 200%;
  border: 1px solid var(--fui-color-border, #EEEEEE);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  left: 0;
  top: 0;
  border-radius: 32rpx;
  box-sizing: border-box;
  pointer-events: none;
}

/* #endif */

.fui-card__header {
  /* #ifndef APP-NVUE */
  width: 100%;
  display: flex;
  box-sizing: border-box;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  flex-direction: row;
  /* #endif */
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.fui-card__header-left {
  white-space: nowrap;
}

.fui-card__header-line {
  position: relative;
  /* #ifdef APP-NVUE */
  border-bottom-width: 0.5px;
  border-bottom-style: solid;
  border-bottom-color: #EEEEEE;
  /* #endif */
}

/* #ifndef APP-NVUE */
.fui-card__header-line::after {
  content: '';
  position: absolute;
  border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  transform-origin: 0 100%;
  bottom: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}

/* #endif */

.fui-card__header-thumb {
  vertical-align: middle;
  margin-right: 20rpx;
}

.fui-card__header-title {
  display: inline-block;
  vertical-align: middle;
  max-width: 380rpx;
  overflow: hidden;
  /* #ifndef APP-NVUE */
  white-space: nowrap;
  text-overflow: ellipsis;
  /* #endif */

  /* #ifdef APP-NVUE */
  lines: 1;
  /* #endif */
}

.fui-card__header-right {
  text-align: right;
  flex-shrink: 0;
}

.fui-card__body {
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */
}

.fui-card__footer {
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */
}
</style>
